<!DOCTYPE html>
<html lang="en" data-bs-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Forms - Modern Bootstrap Admin</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="Advanced form examples with real-time validation, file uploads, and multi-step wizards">
    <meta name="keywords" content="bootstrap, admin, dashboard, forms, validation">
    
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="./assets/favicon-CvUZKS4z.svg">
    <link rel="icon" type="image/png" href="./assets/favicon-B_cwPWBd.png">
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="./assets/manifest-DTaoG9pG.json">
    
    <!-- Preload critical fonts -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" as="style">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <script type="module" crossorigin src="./assets/vendor-bootstrap-C9iorZI5.js"></script>
  <script type="module" crossorigin src="./assets/vendor-charts-DGwYAWel.js"></script>
  <script type="module" crossorigin src="./assets/vendor-ui-DjYv-mAO.js"></script>
  <script type="module" crossorigin src="./assets/main-BHbn44Op.js"></script>
  <script type="module" crossorigin src="./assets/forms-CaBm3py_.js"></script>
  <link rel="stylesheet" crossorigin href="./assets/main-QD_VOj1Y.css">
</head>

<body data-page="forms">
    <!-- Admin App Container -->
    <div class="admin-app">
        <div class="admin-wrapper" id="admin-wrapper">
            
            <!-- Header -->
            <header class="admin-header">
                <nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom">
                    <div class="container-fluid">
                        <!-- Logo/Brand -->
                        <a class="navbar-brand d-flex align-items-center" href="./index.html">
                            <img src="data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3c!--%20Background%20circle%20for%20the%20M%20--%3e%3ccircle%20cx='16'%20cy='16'%20r='16'%20fill='url(%23logoGradient)'/%3e%3c!--%20Centered%20Letter%20M%20--%3e%3cpath%20d='M10%2024V8h2.5l2.5%206.5L17.5%208H20v16h-2V12.5L16.5%2020h-1L14%2012.5V24H10z'%20fill='white'%20font-weight='700'/%3e%3c!--%20Gradient%20definition%20--%3e%3cdefs%3e%3clinearGradient%20id='logoGradient'%20x1='0%25'%20y1='0%25'%20x2='100%25'%20y2='100%25'%3e%3cstop%20offset='0%25'%20style='stop-color:%236366f1;stop-opacity:1'%20/%3e%3cstop%20offset='100%25'%20style='stop-color:%238b5cf6;stop-opacity:1'%20/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e" alt="Logo" height="32" class="d-inline-block align-text-top me-2">
                            <h1 class="h4 mb-0 fw-bold text-primary">Metis</h1>
                        </a>

                        <!-- Search Bar with Alpine.js -->
                        <div class="search-container flex-grow-1 mx-4" x-data="searchComponent">
                            <div class="position-relative">
                                <input type="search" 
                                       class="form-control" 
                                       placeholder="Search... (Ctrl+K)"
                                       x-model="query"
                                       @input="search()"
                                       data-search-input
                                       aria-label="Search">
                                <i class="bi bi-search position-absolute top-50 end-0 translate-middle-y me-3"></i>
                                
                                <!-- Search Results Dropdown -->
                                <div x-show="results.length > 0" 
                                     x-transition:enter="transition ease-out duration-100"
                                     x-transition:enter-start="opacity-0 scale-95"
                                     x-transition:enter-end="opacity-100 scale-100"
                                     class="position-absolute top-100 start-0 w-100 bg-white border rounded-2 shadow-lg mt-1 z-3">
                                    <template x-for="result in results" :key="result.title">
                                        <a :href="result.url" class="d-block px-3 py-2 text-decoration-none text-dark border-bottom">
                                            <div class="d-flex align-items-center">
                                                <i class="bi bi-file-text me-2 text-muted"></i>
                                                <span x-text="result.title"></span>
                                                <small class="ms-auto text-muted" x-text="result.type"></small>
                                            </div>
                                        </a>
                                    </template>
                                </div>
                            </div>
                        </div>

                        <!-- Right Side Icons -->
                        <div class="navbar-nav flex-row">
                            <!-- Theme Toggle with Alpine.js -->
                            <div x-data="themeSwitch">
                                <button class="btn btn-outline-secondary me-2" 
                                        type="button" 
                                        @click="toggle()"
                                        data-bs-toggle="tooltip"
                                        data-bs-placement="bottom"
                                        title="Toggle theme">
                                    <i class="bi bi-sun-fill" x-show="currentTheme === 'light'"></i>
                                    <i class="bi bi-moon-fill" x-show="currentTheme === 'dark'"></i>
                                </button>
                            </div>

                            <!-- Fullscreen Toggle -->
                            <button class="btn btn-outline-secondary me-2" 
                                    type="button" 
                                    data-fullscreen-toggle
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="bottom"
                                    title="Toggle fullscreen">
                                <i class="bi bi-arrows-fullscreen icon-hover"></i>
                            </button>

                            <!-- Notifications -->
                            <div class="dropdown me-2">
                                <button class="btn btn-outline-secondary position-relative" 
                                        type="button" 
                                        data-bs-toggle="dropdown" 
                                        aria-expanded="false">
                                    <i class="bi bi-bell"></i>
                                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                        3
                                    </span>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><h6 class="dropdown-header">Notifications</h6></li>
                                    <li><a class="dropdown-item" href="#">New user registered</a></li>
                                    <li><a class="dropdown-item" href="#">Server status update</a></li>
                                    <li><a class="dropdown-item" href="#">New message received</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item text-center" href="#">View all notifications</a></li>
                                </ul>
                            </div>

                            <!-- User Menu -->
                            <div class="dropdown">
                                <button class="btn btn-outline-secondary d-flex align-items-center" 
                                        type="button" 
                                        data-bs-toggle="dropdown" 
                                        aria-expanded="false">
                                    <img src="data:image/svg+xml,%3csvg%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3c!--%20Background%20circle%20--%3e%3ccircle%20cx='16'%20cy='16'%20r='16'%20fill='url(%23avatarGradient)'/%3e%3c!--%20Person%20silhouette%20--%3e%3cg%20fill='white'%20opacity='0.9'%3e%3c!--%20Head%20--%3e%3ccircle%20cx='16'%20cy='12'%20r='5'/%3e%3c!--%20Body%20--%3e%3cpath%20d='M16%2018c-5.5%200-10%202.5-10%207v1h20v-1c0-4.5-4.5-7-10-7z'/%3e%3c/g%3e%3c!--%20Subtle%20border%20--%3e%3ccircle%20cx='16'%20cy='16'%20r='15.5'%20fill='none'%20stroke='rgba(255,255,255,0.2)'%20stroke-width='1'/%3e%3c!--%20Gradient%20definition%20--%3e%3cdefs%3e%3clinearGradient%20id='avatarGradient'%20x1='0%25'%20y1='0%25'%20x2='100%25'%20y2='100%25'%3e%3cstop%20offset='0%25'%20style='stop-color:%236b7280;stop-opacity:1'%20/%3e%3cstop%20offset='100%25'%20style='stop-color:%234b5563;stop-opacity:1'%20/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e" 
                                         alt="User Avatar" 
                                         width="24" 
                                         height="24" 
                                         class="rounded-circle me-2">
                                    <span class="d-none d-md-inline">John Doe</span>
                                    <i class="bi bi-chevron-down ms-1"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-person me-2"></i>Profile</a></li>
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-gear me-2"></i>Settings</a></li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li><a class="dropdown-item" href="#"><i class="bi bi-box-arrow-right me-2"></i>Logout</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </nav>
            </header>

            <!-- Sidebar -->
            <aside class="admin-sidebar" id="admin-sidebar">
                <div class="sidebar-content">
                    <nav class="sidebar-nav">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a class="nav-link" href="./index.html">
                                    <i class="bi bi-speedometer2"></i>
                                    <span>Dashboard</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./analytics.html">
                                    <i class="bi bi-graph-up"></i>
                                    <span>Analytics</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./users.html">
                                    <i class="bi bi-people"></i>
                                    <span>Users</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./products.html">
                                    <i class="bi bi-box"></i>
                                    <span>Products</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./orders.html">
                                    <i class="bi bi-bag-check"></i>
                                    <span>Orders</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active" href="./forms.html">
                                    <i class="bi bi-ui-checks"></i>
                                    <span>Forms</span>
                                    <span class="badge bg-success rounded-pill ms-auto">Active</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target="#elementsSubmenu" aria-expanded="false">
                                    <i class="bi bi-puzzle"></i>
                                    <span>Elements</span>
                                    <span class="badge bg-primary rounded-pill me-2">New</span>
                                    <i class="bi bi-chevron-down ms-auto"></i>
                                </a>
                                <div class="collapse" id="elementsSubmenu">
                                    <ul class="nav nav-submenu">
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements.html">
                                                <i class="bi bi-grid"></i>
                                                <span>Overview</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements-buttons.html">
                                                <i class="bi bi-square"></i>
                                                <span>Buttons</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements-alerts.html">
                                                <i class="bi bi-exclamation-triangle"></i>
                                                <span>Alerts</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements-badges.html">
                                                <i class="bi bi-award"></i>
                                                <span>Badges</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements-cards.html">
                                                <i class="bi bi-card-text"></i>
                                                <span>Cards</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements-modals.html">
                                                <i class="bi bi-window"></i>
                                                <span>Modals</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements-forms.html">
                                                <i class="bi bi-ui-checks"></i>
                                                <span>Forms</span>
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="./elements-tables.html">
                                                <i class="bi bi-table"></i>
                                                <span>Tables</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./reports.html">
                                    <i class="bi bi-file-earmark-text"></i>
                                    <span>Reports</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./messages.html">
                                    <i class="bi bi-chat-dots"></i>
                                    <span>Messages</span>
                                    <span class="badge bg-danger rounded-pill ms-auto">3</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./calendar.html">
                                    <i class="bi bi-calendar-event"></i>
                                    <span>Calendar</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./files.html">
                                    <i class="bi bi-folder2-open"></i>
                                    <span>Files</span>
                                </a>
                            </li>
                            <li class="nav-item mt-3">
                                <small class="text-muted px-3 text-uppercase fw-bold">Admin</small>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./settings.html">
                                    <i class="bi bi-gear"></i>
                                    <span>Settings</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./security.html">
                                    <i class="bi bi-shield-check"></i>
                                    <span>Security</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="./help.html">
                                    <i class="bi bi-question-circle"></i>
                                    <span>Help & Support</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </aside>

            <!-- Floating Hamburger Menu -->
            <button class="hamburger-menu" 
                    type="button" 
                    data-sidebar-toggle
                    aria-label="Toggle sidebar">
                <i class="bi bi-list"></i>
            </button>

            <!-- Main Content -->
            <main class="admin-main">
                <div class="container-fluid p-4">
                    
                    <!-- Page Header -->
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <h1 class="h3 mb-0">Advanced Forms</h1>
                            <p class="text-muted mb-0">Modern form components with validation, file upload, and wizards</p>
                        </div>
                    </div>

                    <!-- Contact Form -->
                    <div class="row g-4 mb-5">
                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="bi bi-envelope me-2 text-primary"></i>
                                        Contact Form with Real-time Validation
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <form x-data="contactForm()" @submit.prevent="submitForm()">
                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <div class="form-group floating-label">
                                                    <input 
                                                        type="text" 
                                                        class="form-control" 
                                                        name="firstName" 
                                                        placeholder=" "
                                                        x-model="form.firstName"
                                                        @input="validateField('firstName')"
                                                        :class="getFieldClass('firstName')"
                                                        required
                                                    >
                                                    <label class="form-label">First Name</label>
                                                    <div class="invalid-feedback" x-show="errors.firstName" x-text="errors.firstName"></div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group floating-label">
                                                    <input 
                                                        type="text" 
                                                        class="form-control" 
                                                        name="lastName" 
                                                        placeholder=" "
                                                        x-model="form.lastName"
                                                        @input="validateField('lastName')"
                                                        :class="getFieldClass('lastName')"
                                                        required
                                                    >
                                                    <label class="form-label">Last Name</label>
                                                    <div class="invalid-feedback" x-show="errors.lastName" x-text="errors.lastName"></div>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="form-group floating-label">
                                                    <input 
                                                        type="email" 
                                                        class="form-control" 
                                                        name="email" 
                                                        placeholder=" "
                                                        x-model="form.email"
                                                        @input="validateField('email')"
                                                        :class="getFieldClass('email')"
                                                        required
                                                    >
                                                    <label class="form-label">Email Address</label>
                                                    <div class="invalid-feedback" x-show="errors.email" x-text="errors.email"></div>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label class="form-label">Subject</label>
                                                    <select class="form-select" x-model="form.subject" required>
                                                        <option value="">Choose a subject</option>
                                                        <option value="general">General Inquiry</option>
                                                        <option value="support">Technical Support</option>
                                                        <option value="sales">Sales Question</option>
                                                        <option value="feedback">Feedback</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="form-group">
                                                    <label class="form-label">Message</label>
                                                    <textarea 
                                                        class="form-control" 
                                                        rows="4" 
                                                        x-model="form.message"
                                                        @input="validateField('message')"
                                                        :class="getFieldClass('message')"
                                                        placeholder="Tell us how we can help you..."
                                                        required
                                                    ></textarea>
                                                    <div class="invalid-feedback" x-show="errors.message" x-text="errors.message"></div>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <button type="submit" class="btn btn-primary" :disabled="isSubmitting">
                                                    <span x-show="!isSubmitting">
                                                        <i class="bi bi-send me-2"></i>Send Message
                                                    </span>
                                                    <span x-show="isSubmitting">
                                                        <div class="spinner-border spinner-border-sm me-2"></div>
                                                        Sending...
                                                    </span>
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h6 class="card-title">Contact Information</h6>
                                    <div class="d-flex align-items-center mb-3">
                                        <i class="bi bi-geo-alt text-primary me-3"></i>
                                        <div>
                                            <strong>Address</strong><br>
                                            <small class="text-muted">123 Business St, Suite 100<br>City, State 12345</small>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center mb-3">
                                        <i class="bi bi-telephone text-primary me-3"></i>
                                        <div>
                                            <strong>Phone</strong><br>
                                            <small class="text-muted">+1 (555) 123-4567</small>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <i class="bi bi-envelope text-primary me-3"></i>
                                        <div>
                                            <strong>Email</strong><br>
                                            <small class="text-muted">support@company.com</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Registration Form -->
                    <div class="row g-4 mb-5">
                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="bi bi-person-plus me-2 text-success"></i>
                                        User Registration with Password Strength
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <form x-data="registrationForm()" @submit.prevent="submitForm()">
                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <label class="form-label">Username</label>
                                                <div class="input-group">
                                                    <span class="input-group-text"><i class="bi bi-person"></i></span>
                                                    <input 
                                                        type="text" 
                                                        class="form-control" 
                                                        x-model="form.username"
                                                        @input="validateField('username')"
                                                        :class="getFieldClass('username')"
                                                        placeholder="Enter username"
                                                        required
                                                    >
                                                </div>
                                                <div class="invalid-feedback" x-show="errors.username" x-text="errors.username"></div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Email</label>
                                                <div class="input-group">
                                                    <span class="input-group-text"><i class="bi bi-envelope"></i></span>
                                                    <input 
                                                        type="email" 
                                                        class="form-control" 
                                                        x-model="form.email"
                                                        @input="validateField('email')"
                                                        :class="getFieldClass('email')"
                                                        placeholder="Enter email"
                                                        required
                                                    >
                                                </div>
                                                <div class="invalid-feedback" x-show="errors.email" x-text="errors.email"></div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Password</label>
                                                <div class="input-group">
                                                    <span class="input-group-text"><i class="bi bi-lock"></i></span>
                                                    <input 
                                                        :type="showPassword ? 'text' : 'password'" 
                                                        class="form-control" 
                                                        x-model="form.password"
                                                        @input="validatePassword()"
                                                        :class="getFieldClass('password')"
                                                        placeholder="Enter password"
                                                        required
                                                    >
                                                    <button 
                                                        type="button" 
                                                        class="btn btn-outline-secondary"
                                                        @click="showPassword = !showPassword"
                                                    >
                                                        <i :class="showPassword ? 'bi-eye-slash' : 'bi-eye'"></i>
                                                    </button>
                                                </div>
                                                <div class="invalid-feedback" x-show="errors.password" x-text="errors.password"></div>
                                                
                                                <!-- Password Strength Indicator -->
                                                <div class="password-strength mt-2" x-show="form.password">
                                                    <div class="strength-bar">
                                                        <div 
                                                            class="strength-fill"
                                                            :class="passwordStrength.level"
                                                            :style="`width: ${passwordStrength.percentage}%`"
                                                        ></div>
                                                    </div>
                                                    <small :class="`text-${passwordStrength.color}`" x-text="`Password strength: ${passwordStrength.text}`"></small>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">Confirm Password</label>
                                                <div class="input-group">
                                                    <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
                                                    <input 
                                                        type="password" 
                                                        class="form-control" 
                                                        x-model="form.confirmPassword"
                                                        @input="validateField('confirmPassword')"
                                                        :class="getFieldClass('confirmPassword')"
                                                        placeholder="Confirm password"
                                                        required
                                                    >
                                                </div>
                                                <div class="invalid-feedback" x-show="errors.confirmPassword" x-text="errors.confirmPassword"></div>
                                            </div>
                                            <div class="col-12">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" x-model="form.agreeTerms" required>
                                                    <label class="form-check-label">
                                                        I agree to the <a href="#" class="text-primary">Terms of Service</a> and <a href="#" class="text-primary">Privacy Policy</a>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <button type="submit" class="btn btn-success" :disabled="isSubmitting || !isFormValid">
                                                    <span x-show="!isSubmitting">
                                                        <i class="bi bi-person-plus me-2"></i>Create Account
                                                    </span>
                                                    <span x-show="isSubmitting">
                                                        <div class="spinner-border spinner-border-sm me-2"></div>
                                                        Creating Account...
                                                    </span>
                                                </button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="card-title">Password Requirements</h6>
                                    <ul class="list-unstyled mb-0">
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>At least 8 characters</li>
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>One uppercase letter</li>
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>One lowercase letter</li>
                                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>One number</li>
                                        <li><i class="bi bi-check-circle text-success me-2"></i>One special character</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- File Upload Form -->
                    <div class="row g-4 mb-5">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="bi bi-cloud-upload me-2 text-info"></i>
                                        Advanced File Upload with Progress
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div x-data="fileUploadForm()">
                                        <!-- Upload Zone -->
                                        <div 
                                            class="file-upload-zone"
                                            :class="{ 'dragover': dragOver }"
                                            @drop.prevent="handleDrop($event)"
                                            @dragover.prevent="dragOver = true"
                                            @dragleave="dragOver = false"
                                            @click="$refs.fileInput.click()"
                                        >
                                            <i class="bi bi-cloud-upload display-4 text-muted mb-3"></i>
                                            <h5>Drop files here or click to browse</h5>
                                            <p class="text-muted">Support for multiple files (Max 10MB each)</p>
                                            <input 
                                                type="file" 
                                                multiple 
                                                class="d-none" 
                                                x-ref="fileInput"
                                                @change="handleFiles($event.target.files)"
                                                accept="image/*,.pdf,.doc,.docx,.txt"
                                            >
                                        </div>

                                        <!-- File List -->
                                        <div x-show="files.length > 0" class="mt-4">
                                            <h6>Uploaded Files (<span x-text="files.length"></span>)</h6>
                                            <template x-for="file in files" :key="file.id">
                                                <div class="file-item d-flex align-items-center justify-content-between p-3 border rounded mb-2">
                                                    <div class="d-flex align-items-center">
                                                        <i class="bi bi-file-earmark me-3 text-primary"></i>
                                                        <div>
                                                            <div class="fw-medium" x-text="file.name"></div>
                                                            <small class="text-muted" x-text="file.size"></small>
                                                        </div>
                                                    </div>
                                                    <div class="d-flex align-items-center">
                                                        <!-- Progress Bar -->
                                                        <div class="progress me-3" style="width: 100px;" x-show="file.status === 'uploading'">
                                                            <div 
                                                                class="progress-bar progress-bar-striped progress-bar-animated"
                                                                :style="`width: ${file.progress}%`"
                                                            ></div>
                                                        </div>
                                                        <!-- Status Icons -->
                                                        <i class="bi bi-check-circle text-success me-2" x-show="file.status === 'completed'"></i>
                                                        <i class="bi bi-x-circle text-danger me-2" x-show="file.status === 'error'"></i>
                                                        <!-- Remove Button -->
                                                        <button 
                                                            type="button" 
                                                            class="btn btn-sm btn-outline-danger"
                                                            @click="removeFile(file.id)"
                                                        >
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Enhanced Multi-step Form Wizard -->
                    <div class="row g-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="bi bi-list-check me-2 text-warning"></i>
                                        Enhanced Multi-step Form Wizard
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div x-data="enhancedFormWizard()">
                                        <!-- Progress Bar -->
                                        <div class="mb-4">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <span class="text-muted">Progress</span>
                                                <span class="text-muted" x-text="`${currentStep} of ${totalSteps}`"></span>
                                            </div>
                                            <div class="progress" style="height: 8px;">
                                                <div 
                                                    class="progress-bar progress-bar-striped progress-bar-animated"
                                                    :style="`width: ${(currentStep / totalSteps) * 100}%`"
                                                ></div>
                                            </div>
                                        </div>

                                        <!-- Step Indicators -->
                                        <div class="wizard-steps mb-4">
                                            <div class="d-flex justify-content-between">
                                                <template x-for="(step, index) in steps" :key="step.id">
                                                    <div 
                                                        class="wizard-step text-center"
                                                        :class="{
                                                            'active': currentStep === step.id,
                                                            'completed': isStepCompleted(step.id),
                                                            'error': hasStepError(step.id)
                                                        }"
                                                        @click="goToStep(step.id)"
                                                        style="cursor: pointer;"
                                                    >
                                                        <div class="step-number mb-2">
                                                            <i class="bi bi-check" x-show="isStepCompleted(step.id)"></i>
                                                            <i class="bi bi-exclamation-triangle" x-show="hasStepError(step.id)"></i>
                                                            <span x-show="!isStepCompleted(step.id) && !hasStepError(step.id)" x-text="step.id"></span>
                                                        </div>
                                                        <div class="step-title" x-text="step.title"></div>
                                                        <small class="step-description text-muted" x-text="step.description"></small>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>

                                        <!-- Form Content -->
                                        <form @submit.prevent="handleSubmit()">
                                            <div class="wizard-content" style="min-height: 400px;">
                                                
                                                <!-- Step 1: Personal Information -->
                                                <div x-show="currentStep === 1" x-transition.opacity>
                                                    <h5 class="mb-3">Personal Information</h5>
                                                    <p class="text-muted mb-4">Tell us about yourself</p>
                                                    <div class="row g-3">
                                                        <div class="col-md-6">
                                                            <label class="form-label">First Name *</label>
                                                            <input 
                                                                type="text" 
                                                                class="form-control" 
                                                                x-model="formData.firstName"
                                                                :class="getFieldClass('firstName')"
                                                                @blur="validateField('firstName')"
                                                                required
                                                            >
                                                            <div class="invalid-feedback" x-show="errors.firstName" x-text="errors.firstName"></div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Last Name *</label>
                                                            <input 
                                                                type="text" 
                                                                class="form-control" 
                                                                x-model="formData.lastName"
                                                                :class="getFieldClass('lastName')"
                                                                @blur="validateField('lastName')"
                                                                required
                                                            >
                                                            <div class="invalid-feedback" x-show="errors.lastName" x-text="errors.lastName"></div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Email Address *</label>
                                                            <input 
                                                                type="email" 
                                                                class="form-control" 
                                                                x-model="formData.email"
                                                                :class="getFieldClass('email')"
                                                                @blur="validateField('email')"
                                                                required
                                                            >
                                                            <div class="invalid-feedback" x-show="errors.email" x-text="errors.email"></div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Phone Number</label>
                                                            <input 
                                                                type="tel" 
                                                                class="form-control" 
                                                                x-model="formData.phone"
                                                                :class="getFieldClass('phone')"
                                                                @blur="validateField('phone')"
                                                                placeholder="+1 (555) 123-4567"
                                                            >
                                                            <div class="invalid-feedback" x-show="errors.phone" x-text="errors.phone"></div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Date of Birth</label>
                                                            <input 
                                                                type="date" 
                                                                class="form-control" 
                                                                x-model="formData.birthDate"
                                                                :class="getFieldClass('birthDate')"
                                                                @blur="validateField('birthDate')"
                                                            >
                                                            <div class="invalid-feedback" x-show="errors.birthDate" x-text="errors.birthDate"></div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Gender</label>
                                                            <select class="form-select" x-model="formData.gender">
                                                                <option value="">Select Gender</option>
                                                                <option value="male">Male</option>
                                                                <option value="female">Female</option>
                                                                <option value="other">Other</option>
                                                                <option value="prefer-not-to-say">Prefer not to say</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Step 2: Address Information -->
                                                <div x-show="currentStep === 2" x-transition.opacity>
                                                    <h5 class="mb-3">Address Information</h5>
                                                    <p class="text-muted mb-4">Where can we reach you?</p>
                                                    <div class="row g-3">
                                                        <div class="col-12">
                                                            <label class="form-label">Street Address *</label>
                                                            <input 
                                                                type="text" 
                                                                class="form-control" 
                                                                x-model="formData.address"
                                                                :class="getFieldClass('address')"
                                                                @blur="validateField('address')"
                                                                placeholder="123 Main Street"
                                                                required
                                                            >
                                                            <div class="invalid-feedback" x-show="errors.address" x-text="errors.address"></div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">City *</label>
                                                            <input 
                                                                type="text" 
                                                                class="form-control" 
                                                                x-model="formData.city"
                                                                :class="getFieldClass('city')"
                                                                @blur="validateField('city')"
                                                                required
                                                            >
                                                            <div class="invalid-feedback" x-show="errors.city" x-text="errors.city"></div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="form-label">State *</label>
                                                            <select 
                                                                class="form-select" 
                                                                x-model="formData.state"
                                                                :class="getFieldClass('state')"
                                                                @blur="validateField('state')"
                                                                required
                                                            >
                                                                <option value="">Select State</option>
                                                                <option value="AL">Alabama</option>
                                                                <option value="CA">California</option>
                                                                <option value="FL">Florida</option>
                                                                <option value="NY">New York</option>
                                                                <option value="TX">Texas</option>
                                                                <option value="WA">Washington</option>
                                                            </select>
                                                            <div class="invalid-feedback" x-show="errors.state" x-text="errors.state"></div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <label class="form-label">ZIP Code *</label>
                                                            <input 
                                                                type="text" 
                                                                class="form-control" 
                                                                x-model="formData.zipCode"
                                                                :class="getFieldClass('zipCode')"
                                                                @blur="validateField('zipCode')"
                                                                placeholder="12345"
                                                                required
                                                            >
                                                            <div class="invalid-feedback" x-show="errors.zipCode" x-text="errors.zipCode"></div>
                                                        </div>
                                                        <div class="col-12">
                                                            <label class="form-label">Country</label>
                                                            <select class="form-select" x-model="formData.country">
                                                                <option value="US">United States</option>
                                                                <option value="CA">Canada</option>
                                                                <option value="MX">Mexico</option>
                                                                <option value="UK">United Kingdom</option>
                                                                <option value="Other">Other</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Step 3: Account Setup -->
                                                <div x-show="currentStep === 3" x-transition.opacity>
                                                    <h5 class="mb-3">Account Setup</h5>
                                                    <p class="text-muted mb-4">Set up your account credentials</p>
                                                    <div class="row g-3">
                                                        <div class="col-12">
                                                            <label class="form-label">Username *</label>
                                                            <input 
                                                                type="text" 
                                                                class="form-control" 
                                                                x-model="formData.username"
                                                                :class="getFieldClass('username')"
                                                                @blur="validateField('username')"
                                                                placeholder="Choose a unique username"
                                                                required
                                                            >
                                                            <div class="invalid-feedback" x-show="errors.username" x-text="errors.username"></div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Password *</label>
                                                            <input 
                                                                type="password" 
                                                                class="form-control" 
                                                                x-model="formData.password"
                                                                :class="getFieldClass('password')"
                                                                @blur="validateField('password')"
                                                                @input="updatePasswordStrength()"
                                                                required
                                                            >
                                                            <div class="invalid-feedback" x-show="errors.password" x-text="errors.password"></div>
                                                            
                                                            <!-- Password Strength Indicator -->
                                                            <div class="mt-2" x-show="formData.password">
                                                                <div class="strength-bar">
                                                                    <div 
                                                                        class="strength-fill"
                                                                        :class="passwordStrength.level"
                                                                        :style="`width: ${passwordStrength.percentage}%`"
                                                                    ></div>
                                                                </div>
                                                                <small :class="`text-${passwordStrength.color}`" x-text="`Password strength: ${passwordStrength.text}`"></small>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="form-label">Confirm Password *</label>
                                                            <input 
                                                                type="password" 
                                                                class="form-control" 
                                                                x-model="formData.confirmPassword"
                                                                :class="getFieldClass('confirmPassword')"
                                                                @blur="validateField('confirmPassword')"
                                                                required
                                                            >
                                                            <div class="invalid-feedback" x-show="errors.confirmPassword" x-text="errors.confirmPassword"></div>
                                                        </div>
                                                        <div class="col-12">
                                                            <label class="form-label">Security Question</label>
                                                            <select class="form-select" x-model="formData.securityQuestion">
                                                                <option value="">Select a security question</option>
                                                                <option value="pet">What was the name of your first pet?</option>
                                                                <option value="school">What elementary school did you attend?</option>
                                                                <option value="city">In what city were you born?</option>
                                                                <option value="mother">What is your mother's maiden name?</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-12" x-show="formData.securityQuestion">
                                                            <label class="form-label">Security Answer</label>
                                                            <input 
                                                                type="text" 
                                                                class="form-control" 
                                                                x-model="formData.securityAnswer"
                                                                placeholder="Enter your answer"
                                                            >
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Step 4: Preferences & Review -->
                                                <div x-show="currentStep === 4" x-transition.opacity>
                                                    <h5 class="mb-3">Preferences & Review</h5>
                                                    <p class="text-muted mb-4">Configure your preferences and review your information</p>
                                                    
                                                    <!-- Preferences Section -->
                                                    <div class="mb-4">
                                                        <h6 class="mb-3">Notification Preferences</h6>
                                                        <div class="row g-3">
                                                            <div class="col-md-6">
                                                                <div class="form-check form-switch">
                                                                    <input class="form-check-input" type="checkbox" x-model="formData.emailNotifications" id="emailNotifs">
                                                                    <label class="form-check-label" for="emailNotifs">
                                                                        <strong>Email Notifications</strong>
                                                                        <small class="d-block text-muted">Receive updates via email</small>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-check form-switch">
                                                                    <input class="form-check-input" type="checkbox" x-model="formData.smsNotifications" id="smsNotifs">
                                                                    <label class="form-check-label" for="smsNotifs">
                                                                        <strong>SMS Notifications</strong>
                                                                        <small class="d-block text-muted">Receive updates via SMS</small>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-check form-switch">
                                                                    <input class="form-check-input" type="checkbox" x-model="formData.marketingEmails" id="marketing">
                                                                    <label class="form-check-label" for="marketing">
                                                                        <strong>Marketing Communications</strong>
                                                                        <small class="d-block text-muted">Receive promotional content</small>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-check form-switch">
                                                                    <input class="form-check-input" type="checkbox" x-model="formData.profilePublic" id="public">
                                                                    <label class="form-check-label" for="public">
                                                                        <strong>Public Profile</strong>
                                                                        <small class="d-block text-muted">Make profile visible to others</small>
                                                                    </label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Review Section -->
                                                    <div class="mb-4">
                                                        <h6 class="mb-3">Review Your Information</h6>
                                                        <div class="card bg-light">
                                                            <div class="card-body">
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        <h6 class="text-primary">Personal Information</h6>
                                                                        <p class="mb-1"><strong>Name:</strong> <span x-text="`${formData.firstName} ${formData.lastName}`"></span></p>
                                                                        <p class="mb-1"><strong>Email:</strong> <span x-text="formData.email"></span></p>
                                                                        <p class="mb-1"><strong>Phone:</strong> <span x-text="formData.phone || 'Not provided'"></span></p>
                                                                        <p class="mb-0"><strong>Birth Date:</strong> <span x-text="formData.birthDate || 'Not provided'"></span></p>
                                                                    </div>
                                                                    <div class="col-md-6">
                                                                        <h6 class="text-primary">Address</h6>
                                                                        <p class="mb-1" x-text="formData.address"></p>
                                                                        <p class="mb-1" x-text="`${formData.city}, ${formData.state} ${formData.zipCode}`"></p>
                                                                        <p class="mb-0" x-text="formData.country"></p>
                                                                        <br>
                                                                        <h6 class="text-primary">Account</h6>
                                                                        <p class="mb-0"><strong>Username:</strong> <span x-text="formData.username"></span></p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Terms and Conditions -->
                                                    <div class="form-check">
                                                        <input 
                                                            class="form-check-input" 
                                                            type="checkbox" 
                                                            x-model="formData.agreeToTerms" 
                                                            id="terms"
                                                            :class="getFieldClass('agreeToTerms')"
                                                            @change="validateField('agreeToTerms')"
                                                            required
                                                        >
                                                        <label class="form-check-label" for="terms">
                                                            I agree to the <a href="#" class="text-primary">Terms of Service</a> and <a href="#" class="text-primary">Privacy Policy</a> *
                                                        </label>
                                                        <div class="invalid-feedback" x-show="errors.agreeToTerms" x-text="errors.agreeToTerms"></div>
                                                    </div>
                                                </div>

                                                <!-- Step 5: Success -->
                                                <div x-show="currentStep === 5" x-transition.opacity>
                                                    <div class="text-center py-5">
                                                        <div class="mb-4">
                                                            <i class="bi bi-check-circle-fill text-success" style="font-size: 4rem;"></i>
                                                        </div>
                                                        <h3 class="text-success mb-3">Registration Complete!</h3>
                                                        <p class="text-muted mb-4">
                                                            Thank you for completing the registration process. Your account has been created successfully.
                                                        </p>
                                                        <div class="alert alert-info">
                                                            <i class="bi bi-info-circle me-2"></i>
                                                            A confirmation email has been sent to <strong x-text="formData.email"></strong>
                                                        </div>
                                                        <div class="d-flex gap-2 justify-content-center">
                                                            <button type="button" class="btn btn-primary" @click="resetWizard()">
                                                                <i class="bi bi-arrow-clockwise me-2"></i>Start Over
                                                            </button>
                                                            <button type="button" class="btn btn-outline-secondary">
                                                                <i class="bi bi-house me-2"></i>Go to Dashboard
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                            <!-- Navigation Buttons -->
                                            <div class="d-flex justify-content-between mt-4" x-show="currentStep < 5">
                                                <button 
                                                    type="button" 
                                                    class="btn btn-secondary"
                                                    @click="prevStep()"
                                                    :disabled="currentStep === 1 || isSubmitting"
                                                >
                                                    <i class="bi bi-arrow-left me-2"></i>Previous
                                                </button>
                                                
                                                <div class="d-flex gap-2">
                                                    <button 
                                                        type="button" 
                                                        class="btn btn-outline-secondary"
                                                        @click="saveDraft()"
                                                        :disabled="isSubmitting"
                                                    >
                                                        <i class="bi bi-save me-2"></i>Save Draft
                                                    </button>
                                                    
                                                    <button 
                                                        type="button" 
                                                        class="btn btn-primary"
                                                        @click="nextStep()"
                                                        :disabled="!canProceed() || isSubmitting"
                                                    >
                                                        <span x-show="!isSubmitting">
                                                            <span x-text="currentStep === 4 ? 'Complete Registration' : 'Next'"></span>
                                                            <i class="bi bi-arrow-right ms-2" x-show="currentStep < 4"></i>
                                                            <i class="bi bi-check-lg ms-2" x-show="currentStep === 4"></i>
                                                        </span>
                                                        <span x-show="isSubmitting">
                                                            <div class="spinner-border spinner-border-sm me-2"></div>
                                                            Processing...
                                                        </span>
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </main>

            <!-- Footer -->
            <footer class="admin-footer">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            <p class="mb-0 text-muted">© 2025 Modern Bootstrap Admin Template</p>
                        </div>
                        <div class="col-md-6 text-md-end">
                            <p class="mb-0 text-muted">Built with Bootstrap 5.3.7</p>
                        </div>
                    </div>
                </div>
            </footer>

        </div> <!-- /.admin-wrapper -->
    </div>

    <!-- Page-specific Component -->

    <!-- Main App Script -->

    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const toggleButton = document.querySelector('[data-sidebar-toggle]');
        const wrapper = document.getElementById('admin-wrapper');

        if (toggleButton && wrapper) {
          // Set initial state from localStorage
          const isCollapsed = localStorage.getItem('sidebar-collapsed') === 'true';
          if (isCollapsed) {
            wrapper.classList.add('sidebar-collapsed');
            toggleButton.classList.add('is-active');
          }

          // Attach click listener
          toggleButton.addEventListener('click', () => {
            const isCurrentlyCollapsed = wrapper.classList.contains('sidebar-collapsed');
            
            if (isCurrentlyCollapsed) {
              wrapper.classList.remove('sidebar-collapsed');
              toggleButton.classList.remove('is-active');
              localStorage.setItem('sidebar-collapsed', 'false');
            } else {
              wrapper.classList.add('sidebar-collapsed');
              toggleButton.classList.add('is-active');
              localStorage.setItem('sidebar-collapsed', 'true');
            }
          });
        }
      });
    </script>
</body>
</html> 